<template>
    <div class="container">

        <el-form ref="form" :model="form" :rules="rules" label-width="90px" style="padding-left: 10%;" size="large">
            <el-card shadow="never" :body-style="{ padding: '20px' }">
                <template #header>
                    <img class="mark" src="@/assets/goods/order/bookmarks.svg" alt="">
                    <span>名片信息</span>
                </template>

                <div class="content">
                    <el-form-item label="LOGO:" prop="tenantLogo">
                        <el-input v-model="form.tenantLogo" class="card-info-item" v-show="false"></el-input>
                        <el-upload class="avatar-uploader el-upload" :headers="headers" accept="image/*"
                            :on-success="(res, file) => handleUploadSuccess(res, file, 'tenantLogo')"
                            :show-file-list="false" :action="uploadUrl">
                            <el-image fit="cover" v-if="form.tenantLogo" class="avatar" :src="form.tenantLogo" lazy>
                                <template #error>
                                    <div class="image-slot">
                                        <img class="avatar" src="@/assets/goods/order/img_failure.svg" alt="">
                                    </div>
                                </template>
                            </el-image>
                            <div v-else class="upload-text">点击上传图片</div>
                            <div class="btn" v-if="form.tenantLogo">
                                <el-button type="primary" @click.stop="deleteImg('tenantLogo')">
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                </el-button>
                            </div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="公司名称:" prop="companyName">
                        <el-input v-model="form.companyName" class="card-info-item" placeholder="请输入公司名称"></el-input>
                    </el-form-item>
                    <el-form-item label="企业密令:">
                        <el-input v-model="form.secretOrder" class="card-info-item" placeholder="请输入企业密令"></el-input>
                    </el-form-item>
                    <el-form-item label="所属行业:" prop="industryInvolved">
                        <el-input v-model="form.industryInvolved" class="card-info-item" placeholder="请输入所属行业"></el-input>
                    </el-form-item>
                    <el-form-item label="公司地址:" prop="address">
                        <el-input v-model="form.address" class="card-info-item" placeholder="请输入公司地址"></el-input>
                    </el-form-item>
                </div>
            </el-card>



            <el-card class="card" shadow="never" :body-style="{ padding: '20px' }">
                <template #header>
                    <img class="mark" src="@/assets/goods/order/bookmarks.svg" alt="">
                    <span>公司简介</span>
                </template>

                <div class="content">
                    <el-form-item prop="intro">

                        <editor v-model="form.intro" style="max-height: 200px;" />
                    </el-form-item>
                </div>
            </el-card>

            <el-card class="card" shadow="never" :body-style="{ padding: '20px' }">
                <template #header>
                    <img class="mark" src="@/assets/goods/order/bookmarks.svg" alt="">
                    <span>公司使命</span>
                </template>

                <div class="content">
                    <el-form-item>
                        <editor v-model="form.companyHistory" style="max-height: 200px;" />
                    </el-form-item>
                </div>
            </el-card>
        </el-form>

        <el-button style="margin: 20px auto;display: block;padding: 0 80px;" type="primary" size="large"
            @click="submitForm">保存</el-button>
    </div>
</template>

<script >
import { globalHeaders } from '@/utils/request';
import { editCompanyInfo } from '@/api/goods/userCardCompanyInfo';
import useUserStore from '@/store/modules/user';
const { sysTenantVo } = useUserStore();
export default {
    data() {
        return {
            uploadUrl: import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload',
            headers: globalHeaders(),
            form: sysTenantVo,
            rules: {
                companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
                companySecretKey: [{ required: true, message: '请输入企业密令', trigger: 'blur' }],
                industry: [{ required: true, message: '请输入所属行业', trigger: 'blur' }],
                companyAddress: [{ required: true, message: '请输入公司地址', trigger: 'blur' }],
                companyIntroduction: [{ required: true, message: '请输入公司简介', trigger: 'blur' }],
                companyHistory: [{ required: true, message: '请输入公司使命', trigger: 'blur' }]
            },
        }
    },
    created() {
    },
    methods: {
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    editCompanyInfo(this.form).then(res => {
                        this.$modal.msgSuccess('保存成功');
                    })
                } else {
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs.form.resetFields();
        },
        handleUploadSuccess(res, file, key) {
            this.form[key] = res.data.url
        },
        handleRemove(key) {
            this.form[key] = ''
        },
        beforeUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        },
        deleteImg(key) {
            this.form[key] = ''
        },
    },
}


</script>

<style lang="scss" scoped>
.container {
    padding: 20px;
}

.mark {
    width: 18px;
    margin-right: 10px;
}

.avatar-uploader,
.el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 120px !important;
    height: 120px;
    // display: inline-block;
    margin-right: 10px;
}

.avatar-uploader:hover,
.el-upload:hover {
    border-color: #409eff;
}

.imgs {
    display: inline-block;
}

.avatar-uploader__img {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 120px !important;
    height: 120px;
    display: inline-block;
    margin-right: 10px;

    img {
        width: 120px !important;
        height: 120px;
        object-fit: fill;
    }
}

.btn {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    width: 120px !important;
    height: 120px;
    border-radius: 0 6px 0 6px;
    text-align: center;
    line-height: 120px;
}

.avatar-uploader:hover {

    // 鼠标悬浮显示按钮
    .btn {
        display: block;
    }

}

.upload-text {
    font-size: 14px;
    color: #8c939d;
    line-height: 20px;
    text-align: center;
    margin: 0 auto;
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
}

.card-info-item {
    width: 450px;
}

.content-img {
    display: flex;
    padding-top: 40px;
    // justify-content: space-between;
}

.card {
    margin-top: 20px;
}

.form-item__label::before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
}
</style>
<style type="text/css">
.card-img .el-form-item__content {
    display: block;
    text-align: center;
}
</style>